<template>
    <div>
        <LiveAdverDetails/>
        <AddAdverModel/>
        <EditAdverModel/>
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab active">广告主</div>
                    <div class="sch_tab" @click="switchTab('/livegroup')">广告组</div>
                </div>
                <span class="font_12 color_03 flexbox flexcenter"> <i class="el-icon-warning-outline" style="font-size:16px;margin-right:5px"></i> 每天中午12点20分、3点20分更新数据</span>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter">
                    <span class="drop_text">素材上传</span>
                    <el-date-picker style="width:260px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.create_date" type="daterange" clearable size="small" @change="changeRank()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <span class="rank_line"></span>
                    <span class="drop_text">数据拉取</span>
                    <el-date-picker style="width:260px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.pulldate_num" type="daterange" clearable size="small" @change="changeRank()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-popover placement="bottom-start" width="380" v-model="is_adver">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween" style="height:30px;margin-left:10px">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/account_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{adverCheck.name?adverCheck.name:'请先选择模板'}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model" style="padding:4px">
                            <span class="tm_title font_16 color_01">模板</span>
                            <div class="yusuan_list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="is_load">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeAdver(item,index)" :class="{'active':item.id==adverCheck.id}" v-for="(item,index) in adverList" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter">
                                        <span class="icon_btn" @click.stop="deletAdverModel(item,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                                        <span class="icon_btn" @click.stop="editAdverModel(item,index)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                            <el-button plain size="small" style="width:100%" @click="addAdverModel">添加模板</el-button>
                        </div>
                    </el-popover>

                    <div class="flexbox flexcenter">
                        <el-popover placement="bottom-start" width="225" trigger="hover" style="margin-left:10px">
                            <div slot="reference">
                                <i class="el-icon-question has_quetion"></i>
                            </div>
                            <ul class="hasSelectList">
                                <li v-for="(item,index) in adverCheck.campaign" :key="index">{{item.name}}</li>
                            </ul>
                        </el-popover>
                        <span class="font_14 color_02">已选账户</span>
                    </div>
                    <!-- <el-input style="width:216px;margin-left:12px" clearable size="small" placeholder="广告主ID" @change="changeRank()" suffix-icon="el-icon-search" v-model="queryInfo.advertiser_id">
                    </el-input> -->
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <div class="flexbox flexbetween flexcenter" style="margin-bottom:16px">
                    <span class="font_16 color_01">广告主监测列表</span>
                </div>
                <el-table :data="tableData" @sort-change='sortChange' class="com_table" max-height="700px">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="ossurl" label="素材视频" width="100">
                        <template slot-scope="scope">
                            <template v-if="scope.row.ossurl">
                                <!-- <el-popover placement="left" title="" width="280" trigger="hover" content="" @show='showVideo(scope.row.ossurl)' @hide='hideVideo'>
                                    <div style="width:100%;height:500px">
                                        <video v-if="video_status" id="media" :src="vd_url" muted autoplay preload controls width="100%" height="100%"></video>
                                    </div>
                                    <div class="adver_vd flexbox flexcenter" slot="reference">
                                        <img :src="scope.row.ossurl+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" style="width:42px;height:60px">
                                    </div>
                                </el-popover> -->
                                <div class="adver_vd flexbox flexcenter" slot="reference">
                                    <img :src="scope.row.ossurl+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" style="width:42px;height:60px">
                                </div>
                            </template>
                            <template v-else>
                                <div class="adver_vd flexbox flexcenter flexjust adver_bg">
                                    暂无
                                    <br/>
                                    视频
                                </div>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="word" label="素材名称" min-width="250">
                    </el-table-column>
                    <el-table-column prop="material_id" label="素材ID" width="250">
                    </el-table-column>
                    <el-table-column prop="distinct_qianchuan_ad_id" label="千川计划数" width="150">
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" width="130" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_order_amount" label="GMV" width="130" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="roi" label="ROI" width="130" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.roi | keepTwoNumT}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="roi" label="操作" width="130">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="liveAdverDetails(scope.row)">详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import LiveAdverDetails from './LiveAdverDetails'
import AddAdverModel from './AddAdverModel'
import EditAdverModel from './EditAdverModel'
export default {
    name: "",
    data() {
        return {
            is_adver:false,
            is_load:false,
            adverCheck:{},
            adverList:[],
            queryInfo: {
                page: 1,
                limit: 20,
                advertiser_id: "",
                create_date:null,
                pulldate_num: null,
                field:"",
                order:"",
            },
            tempInfo:{
                page: 1,
                limit: 20,
            },
            loading: false,
            total: 0,
            setpage: 1,
            tableData: [],
            vd_url: "",
            video_status: false,
        };
    },
    created() {
        this.getModelList()
    },
    beforeDestroy() {
        
    },
    methods: {

        // 视频播放
        showVideo(url) {
            this.vd_url = url;
            this.video_status = true;
        },
        // 视频停止
        hideVideo() {
            this.vd_url = "";
            this.video_status = false;
        },

        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
            return[that.formatDate(start),that.formatDate(end)]
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            if(!this.queryInfo.advertiser_id||!this.queryInfo.create_date||!this.queryInfo.pulldate_num){
                //this.$message.error('请先选择上传时间，拉取时间和输入广告主ID');
                return;
            }
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Livetesting/advertiser_list",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.sesstionData()
            }
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 获取模板列表
        async getModelList(){
            const { data: res } = await this.$http.post(
                "videotest/Livetesting/modelad_list",
                this.tempInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.adverList = res.data.list
                let sessionForm  = JSON.parse(window.sessionStorage.getItem("adverQuery"))
                if(sessionForm){
                    this.queryInfo = sessionForm.queryInfo
                    this.adverCheck = sessionForm.adverCheck
                }else{
                    this.queryInfo.create_date = this.getTimeFn()
                    this.queryInfo.pulldate_num = this.getTimeFn()
                    this.queryInfo.advertiser_id = res.data.list[0].id;
                    this.adverCheck = res.data.list[0]
                }
                this.getDataList(1);
            }
        },

        // 获取模板列表
        async getMoreModel(){
            const { data: res } = await this.$http.post(
                "videotest/Livetesting/modelad_list",
                this.tempInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if(res.data.list.length>0){
                    this.adverList = this.adverList.concat(res.data.list);
                }else{
                    this.is_load = true
                }
            }
        },

        loadMore(){
            this.tempInfo.page++
            this.getMoreModel()
        },

        // 排序
        sortChange(column) {
            this.queryInfo.field = "";
            this.queryInfo.order = "";
            if (!column.order) {
                this.getDataList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order = order;
            this.queryInfo.field = column.prop;
            this.getDataList(1);
        },

        // 切换模板
        changeAdver(item) {
            this.is_adver = false
            this.adverCheck = item;
            this.queryInfo.advertiser_id = item.id;
            this.getDataList(1)
            this.sesstionData()
        },

        //广告主详情
        liveAdverDetails(row){
            const attr = {
                dialogVsb: true,
                title:row.word,
                material_id:row.material_id,
                advertiser_id:this.queryInfo.advertiser_id,
                create_date:this.queryInfo.create_date,
                pulldate_num:this.queryInfo.pulldate_num,
            };
            this.$bus.emit("liveAdverDetails", attr);
        },

        // 添加模板
        addAdverModel(){
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addAdverModel", attr);
        },

        // 编辑模板
        editAdverModel(row){
            const attr = {
                dialogVsb: true,
                campaign:row.campaign.map((item)=>{return Number(item.id)}),
                id:row.id,
                name:row.name,
                is_select:row.id==this.adverCheck.id?true:false
            };
            this.$bus.emit("editAdverModel", attr);
        },

        // 删除模板
        deletAdverModel(item, index) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "videotest/Livetesting/admodel_del",
                        {
                            id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.adverList.splice(index, 1);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        if(item.id==this.adverCheck.id){
                            this.adverCheck = {}
                            this.queryInfo.page = 1
                            this.queryInfo.advertiser_id = ''
                            this.getDataList(1);
                            this.sesstionData()
                        }
                    }
                })
                .catch(() => {});
        },

        changeRank(){
            this.getDataList(1)
            this.sesstionData()
        },

        sesstionData(){
            let sessionForm = {
                queryInfo:this.queryInfo,
                adverCheck:this.adverCheck
            }
            window.sessionStorage.setItem(
                "adverQuery",
                JSON.stringify(sessionForm)
            );
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
       LiveAdverDetails,
       AddAdverModel,
       EditAdverModel
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.rank_line{
    margin: 0 10px;
}
.yusuan_list{
    margin-top: 0;
    margin-bottom: 20px;
}
.adver_vd{
    width: 42px;
    height: 60px;
    border-radius: 2px;
    overflow: hidden;
}
.adver_bg{
    background: #F7F7F7;
    font-size: 12px;
    color: #B4B7BD;
    line-height: 1.4;
}

.el-icon-question.has_quetion{
    color: #CFD4DD;
    margin-top:3px;
    margin-right:5px
}
</style>

